import { defineComponent, reactive, ref } from "vue";
import styles from "./claimService.module.less";
import { imgPath } from "@/common/utils";
import { DownloadOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: 'dutyClaimService',
  setup() {
    const achievementState = ref([
      {
        label: "服务用户",
        value: "30,000,000+",
      },
      {
        label: "协助保单",
        value: "200,000+",
      },
      {
        label: "索赔金额",
        value: "250,000,000+",
      },
    ])
    // 成绩
    const Achievement = () => (
      <div class={styles.achievement}>
        <div class={styles.container}>
          {
            achievementState.value.map((item: any) => (
              <div class={styles['achievement-item']}>
                <div class={styles['item-value']}>{item.value}</div>
                <div class={styles['item-label']}>{item.label}</div>
              </div>
            ))
          }
        </div>
      </div>
    )

    // 项目标题
    const ProjectTitle = (props: any) => (
      <div class={styles['project-title']}>
        <img src={imgPath('/decoration.png')} />
        <span>{props.title}</span>
        <img class={styles.reverse} src={imgPath('/decoration.png')} />
      </div>
    )

    const flowState = ref([
      {
        flag: imgPath('/duty/claimService/flow-1-flag.png'),
        icon: imgPath('/duty/claimService/flow-1-icon.png'),
        name: '出险报案',
        triangle: imgPath('/duty/claimService/flow-1-triangle.png'),
        background: imgPath('/duty/claimService/flow-1-background.png'),
        content: '出险后拨打400-855-8990报案，同时向交通、公安等其他部门报案，并现场拍照、保存证据。',
      },
      {
        flag: imgPath('/duty/claimService/flow-2-flag.png'),
        icon: imgPath('/duty/claimService/flow-2-icon.png'),
        name: '事故处理',
        triangle: imgPath('/duty/claimService/flow-2-triangle.png'),
        background: imgPath('/duty/claimService/flow-2-background.png'),
        content: '单证收集，拿到事故证明，书面向第三方索赔，同时与调处员协商、沟通，反映真实诉求，共同协商处理事故。',
      },
      {
        flag: imgPath('/duty/claimService/flow-3-flag.png'),
        icon: imgPath('/duty/claimService/flow-3-icon.png'),
        name: '事故索赔',
        triangle: imgPath('/duty/claimService/flow-3-triangle.png'),
        background: imgPath('/duty/claimService/flow-3-background.png'),
        content: '可在调处员的协助下申请垫付或预付，并向保险公司提出索赔。',
      },
      {
        flag: imgPath('/duty/claimService/flow-4-flag.png'),
        icon: imgPath('/duty/claimService/flow-4-icon.png'),
        name: '赔款结案',
        triangle: imgPath('/duty/claimService/flow-4-triangle.png'),
        background: imgPath('/duty/claimService/flow-4-background.png'),
        content: '调解后并达成协议，赔款、结案。 保险公司或第三方赔偿，赔款将划转至索赔申请书中填写的银行账户。',
      },
    ])

    // 索赔流程
    const Flow = () => (
      <div class={styles.flow}>
        <ProjectTitle title="索赔流程" />
        <div class={styles['title-tip']}>便捷的索赔流程</div>
        <div class={styles['process-intro']}>
          {
            flowState.value.map((item: any) => (
              <div class={styles['process-one']}>
                <img class={styles['process-flag']} src={item.flag} />
                <img class={styles['process-icon']} src={item.icon} />
                <span class={styles['process-name']}>{item.name}</span>
                <img class={styles['process-triangle']} src={item.triangle} />
                <div class={styles['process-content']}>
                  <img class={styles['process-background']} src={item.background} />
                  <span>{item.content}</span>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    )

    const contactWayState = ref([
      {
        company_name: '中国人民财产保险股份有限公司',
        contact_mobile: '95518',
        onLineNet: 'www.picc.com',
      },
      {
        company_name: '中国平安财产保险股份有限公司',
        contact_mobile: '95511',
        onLineNet: 'property.pingan.com',
      },
      {
        company_name: '中国太平洋财产保险股份有限公司',
        contact_mobile: '95500',
        onLineNet: 'www.cpic.com.cn',
      },
      {
        company_name: '阳光财产保险股份有限公司',
        contact_mobile: '95510',
        onLineNet: 'www.sinosig.com',
      },
      {
        company_name: '中国大地财产保险股份有限公司',
        contact_mobile: '95590',
        onLineNet: 'www.95590.cn',
      },
      {
        company_name: '太平财产保险有限公司',
        contact_mobile: '95589',
        onLineNet: 'www.cntaiping.com',
      },
      {
        company_name: '财信吉祥人寿保险股份有限公司',
        contact_mobile: '4008-003-003',
        onLineNet: 'life.hnchasing.com',
      },
      {
        company_name: '永安财产保险股份有限公司',
        contact_mobile: '95502',
        onLineNet: 'www.yaic.com.cn',
      },
      {
        company_name: '中华联合财产保险股份有限公司',
        contact_mobile: '95585',
        onLineNet: 'property.cic.cn',
      },
      {
        company_name: '中国人寿财产保险股份有限公司',
        contact_mobile: '95519',
        onLineNet: 'www.chinalife-p.com.cn',
      },
      {
        company_name: '华泰财产保险有限公司',
        contact_mobile: '4006095509',
        onLineNet: 'pc.ehuatai.com',
      },
      {
        company_name: '华安财产保险股份有限公司',
        contact_mobile: '95556',
        onLineNet: 'www.sinosafe.com.cn',
      },
      {
        company_name: '长安责任保险股份有限公司',
        contact_mobile: '95592',
        onLineNet: 'www.capli.com.cn',
      },
      {
        company_name: '众安在线财产保险股份有限公司',
        contact_mobile: '952299',
        onLineNet: 'www.zhongan.com',
      },
      {
        company_name: '美亚财产保险有限公司',
        contact_mobile: '400-820-8858',
        onLineNet: 'https://www.aig.com.cn',
      },
    ])

    // 合作保司客服联系方式
    const ContactWay = () => (
      <div class={styles['contact-way']}>
        <ProjectTitle title="合作保司客服联系方式" />
        <div class={styles['contact-table']}>
          <div class={styles['table-header']}>
            <div class={styles['table-header-item']}>
              <img src={imgPath('/duty/claimService/company.svg')} />
              <span>保险公司</span>
            </div>
            <div class={styles['table-header-item']}>
              <img src={imgPath('/duty/claimService/tel.svg')} />
              <span>客服电话</span>
            </div>
            <div class={styles['table-header-item']}>
              <img src={imgPath('/duty/claimService/url.svg')} />
              <span>在线服务网址</span>
            </div>
          </div>
          {
            contactWayState.value.map((item: any) => (
              <div class={styles['table-row']}>
                <div class={styles['row-col']}>{item.company_name}</div>
                <div class={styles['row-col']}>{item.contact_mobile}</div>
                <div class={styles['row-col']}>{item.onLineNet}</div>
              </div>
            ))
          }
        </div>
      </div>
    )
    // 理赔争议处理机制和流程
    const Mechanism = () => (
      <div class={styles.mechanism}>
        <ProjectTitle title="理赔争议处理机制和流程" />
        <div class={styles['tab-section']}>
          <span>1、被保险人在理赔处理过程中有争议的可拨打400-855-8990或向本平台在线客服反馈。</span>
          <span>2、收到反馈后，我公司将在2小时内安排专门服务人员与您联系沟通，协助与承保公司进行协商，10日内反馈协商结果。</span>
          <span>3、处理完成后，将在2个工作日内由我公司400电话中心坐席对处理结果进行满意度回访。</span>
          <span>4、协商不成的，被保险人可以提交保险单载明的仲裁机构仲裁；保险单未载明仲裁机构且争议发生后未达成仲裁协议的，可依法向中华人民共和国（不含港澳台地区）法院起诉。</span>
        </div>
      </div>
    )
    // 理赔服务时限
    const TimeLimit = () => (
      <div class={styles['time-limit']}>
        <ProjectTitle title="理赔服务时限" />
        <div class={styles['tab-section']}>
          <span>1、保险人在接收到被保险人或者受益人的赔偿或者给付保险金请求及完整材料后，将及时做出核定，如遇复杂情形，核定期限不超过三十日，但合同另有约定的除外。</span>
          <span>2、对属于保险责任的，保险人在与被保险人或者受益人达成赔偿或者给付保险金的协议后十日内，履行赔偿或者给付保险金义务。保险合同对赔偿或者给付保险金的期限有约定的，保险人将按照约定履行赔偿或者给付保险金义务。</span>
          <span>3、对不属于保险责任的，保险人自作出核定之日起三日内向被保险人或者受益人发出拒绝赔偿或者拒绝给付保险金通知书。</span>
        </div>
      </div>
    )

    const materialState = reactive({
      navs: [
        {
          name: '旅游社责任保险',
          download_url: '',
          content: [
            {
              title: '人身伤害案件索赔资料',
              children: [
                {
                  title: '基本材料',
                  list: [
                    '1、保险单复印件',
                    '2、旅游合同、行程单、双方旅行社确认单（转团、拼团时提供）',
                    '3、人员名单',
                    '4、出险事故证明（或被保险人能提供的其他能够确认事故性质、原因、损失程度等的照片或资料；或提供受伤旅游者或被保险人向旅游辅助者、第三人索赔的书面材料）或事故情况说明（仅适用于无法提供证明的情形）',
                    '5、索赔申请书（盖旅行社章） 出险索赔通知书模板 单证交接清单模板 （请点击下载）',
                    '6、旅行社账号（或旅游者账号）',
                    '7、赔偿协议',
                    '8、旅行社先行付款的，提供赔付收据',
                    '9、旅游者身份证复印件',
                    '10、旅行社与旅游大巴租车协议（如需）',
                  ]
                },
                {
                  title: '医疗费用',
                  list: [
                    '1、医疗费发票原件（相关方承担赔偿的可以提供复印件，盖保险人理赔专用章，并提供理赔明细）',
                    '2、门诊病历原件或复印件',
                    '3、住院病历复印件',
                    '4、后续治疗费证明',
                    '5、交通费发票原件（包含救护车费、租车费等）',
                    '6、需要康复的证明',
                    '7、康复费发票原件',
                    '8、整容费发票原件',
                    '9、医疗费用清单',
                  ]
                },
                {
                  title: '误工费',
                  list: [
                    '1、有固定收入：事故前三个月的工资单（盖财务章）、超过纳税标准的提供地税局个人纳税证明、单位出具的因误工实际减少收入证明',
                    '2、无固定收入：最近3年的收入证明，不能提供的，需提供能证明其从事何种职业的相关证明',
                    '3、医疗机构出具的病假证明或司法鉴定机构鉴定意见书',
                  ]
                },
                {
                  title: '护理费',
                  list: [
                    '1、请家政护理的，交费收据（盖章）。其他同误工费单证',
                    '2、出院后护理的，出院后需要护理的相关证明（医疗机构证明、司法鉴定证明）',
                  ]
                },
                {
                  title: '伤残',
                  list: [
                    '1、司法鉴定书原件（盖骑缝章）',
                    '2、鉴定机构营业执照',
                    '3、鉴定费发票原件',
                  ]
                },
                {
                  title: '死亡',
                  list: [
                    '1、医学死亡证明（未经医院的，提供公安部门死亡证明）',
                    '2、户口本复印件（包括能证明其户口性质的其他证明）',
                  ]
                },
                {
                  title: '被抚养人生活费',
                  list: [
                    '1、被抚养人的户口本复印件（包括能证明其年龄、户口性质、需要被抚养原因的相关证明）',
                    '2、被抚养人共同抚养人数量的证明',
                  ]
                },
                {
                  title: '营养费',
                  list: [
                    '医疗机构或司法鉴定机构出具的需要加强营养的证明',
                  ]
                },
                {
                  title: '精神抚慰金',
                  list: [
                    '法院判决书',
                  ]
                },
                {
                  title: '被保险人工作人员人身伤害',
                  list: [
                    '工作人员带团证明',
                  ]
                },
              ]
            },
            {
              title: '财产损失案件索赔资料',
              children: [
                {
                  title: '财产损失',
                  list: [
                    '除基本材料外还需提供以下资料：',
                    '1、财产损失清单',
                    '2、原始发票或相关购物证明',
                    '3、财产被盗抢的，提供当地报警回执，若财产在国外被盗抢的，提供当地报警回执确有困难的，可以提供组团社及地接社签章证明',
                    '4、财产交由被保险人或旅游辅助服务者集中照管的证明或说明',
                  ]
                }
              ]
            },
            {
              title: '延误案件索赔资料',
              children: [
                {
                  title: '费用类损失',
                  list: [
                    '除基本材料外还需提供以下资料：',
                    '1、延误、取消原因的说明或者证明',
                    '2、延误、取消产生损失费用发票原件或相关证明（仅适用于无法取得发票原件的情况下）',
                    '3、法律费用单证：法院判决或调解书，律师出庭授权委托书，律师费发票原件,诉讼费收据',
                    '4、无责救助费：产生相关费用发票原件',
                    '5、附加险抚慰金：死亡、伤残证明，其他同所有案件',
                    '6、扩展费用：相关费用发票原件',
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '旅游意外险',
          download_url: '',
          content: [
            {
              title: '意外险案件索赔资料',
              children: [
                {
                  title: '基本材料',
                  list: [
                    '1、索赔申请书（航班及旅程延误索赔可免提供）',
                    '2、被保险人身份证明（身份证或护照等）复印件，需同投保时所使用证件，如投保时使用护照，则仅需提供护照复印件',
                    '3、保险金受益人非被保险人本人的，需提供保险金受益人身份证明（身份证或护照等）复印件，以及保险金受益人与被保险人之间的关系证明(包括但不限于结婚证、户口本、出生证明、遗产继承公证书等，或农村村委会出具的关系证明、或城镇居委会或派出所等政府职能机关出具的关系证明)',
                    '4、保险金受益人或者继承人为限制民事行为能力人或者无民事行为能力人时，由其合法监护人代其申请领取保险金，其合法监护人须提供受益人或者继承人为限制民事行为能力人或者无民事行为能力人的证明和监护人具有合法监护权的证明',
                    '5、保险人要求的或保险金申请人所能提供的与确认保险事故的性质、原因、损失程度等有关的其他证明和资料',
                    '6、被保险人委托他人申请的，提供授权委托书原件、委托人和受托人的身份证明等相关证明文件',
                  ]
                },
                {
                  title: '意外伤害(含高风险运动)身故及伤残',
                  list: [
                    '1、身故：',
                    '（1）县级以上医院或公安机关出具的死亡证明',
                    '（2）被保险人户籍注销证明、或丧葬证明、或火化证明（三者提供其一即可）',
                    '（3）境外身故的，需提供事故发生地相关政府部门出具的或我国驻该国使领馆认证的事故证明材料',
                    '2、伤残：二级以上（含二级）或双方认可的司法鉴定机构出具的伤残鉴定诊断书',
                    '3、交通工具、自然灾害意外伤害累计赔付的，需提供：',
                    '（1）交通工具意外伤害身故：交通管理部门出具的事故证明',
                    '（2）自然灾害意外伤害身故：气象部门出具的自然灾害气象证明，或媒体的新闻报道',
                  ]
                },
                {
                  title: '突发疾病、急性病身故',
                  list: [
                    '1、县级以上医院或公安机关出具的死亡证明',
                    '2、县级以上医院出具的诊断证明',
                    '3、被保险人户籍注销证明、或丧葬证明、或火化证明（三者提供其一即可）',
                    '4、境外身故的，需提供事故发生地相关部门出具的或我国驻该国使领馆确认的事故证明材料',
                  ]
                },
                {
                  title: '突发疾病、急性病全残',
                  list: [
                    '二级以上（含二级）或双方认可的司法鉴定机构出具的伤残鉴定诊断书',
                  ]
                },
                {
                  title: '丧葬处理费',
                  list: [
                    '1、县级以上医院或公安机关出具的死亡证明',
                    '2、被保险人户籍注销证明、或丧葬证明、或火化证明（三者提供其一即可）',
                    '3、相关丧葬费用的发票',
                    '4、境外身故的，需提供事故发生地相关政府部门出具的或我国驻该国使领馆确认的事故证明材料',
                  ]
                },
                {
                  title: '意外伤害/突发疾病/急性病医疗',
                  list: [
                    '1、医疗费发票',
                    '2、门（急）诊：门（急）诊病历或诊断证明',
                    '3、住院：完整病历、或出院记录、或出院证明、或出院小结',
                    '4、医疗费用及用药清单',
                  ]
                },
                {
                  title: '住院津贴',
                  list: [
                    '完整病历、或出院记录、或出院证明、或出院小结',
                  ]
                },
                {
                  title: '航班延误',
                  list: [
                    '1、航空公司出具的延误证明（含航班号、原定起飞时间、延误原因、被保险人的姓名及证件号），或被保险人的登机牌（含被保险人姓名、航班号及原定起飞时间），或被保险人的电子客票号（可进行验真）',
                    '2、原航班取消的，还需提供航空公司安排的替代性航班登机牌（含被保险人姓名、航班号及起飞时间）或被保险人的电子客票号（可进行验真）',
                    '3、如电子客票号验真失败，需补充提交延误证明或登机牌',
                  ]
                },
                {
                  title: '轮船延误',
                  list: [
                    '1、船运公司出具的延误证明，含船号、原定开船时间、延误时间及延误原因',
                    '2、被保险人的船票，含船票号、开船时间',
                  ]
                },
                {
                  title: '行李延误',
                  list: [
                    '1、航空公司或机场地面服务公司出具的行李延误证明',
                    '2、被保险人登机牌，含被保险人姓名、航班号、原定起飞时间',
                    '3、行李票或办理托运行李的手续证明',
                  ]
                },
                {
                  title: '行李物品损失',
                  list: [
                    '1、警方出具的报案证明或其他书面证明文件',
                    '2、财产损失清单',
                    '3、原始发票或相关购物证明',
                    '4、合法经营的承运人、酒店作为财产保管方出具的签章的书面证明文件，包含对事故的原因、经过、损失情况的证明',
                  ]
                },
                {
                  title: '旅行证件损失',
                  list: [
                    '1、公安机关出具的报案证明或其他书面证明文件',
                    '2、重新补办旅行证件的成本、手续费的费用单据',
                    '3、额外支出的交通费用及酒店住宿费用的费用单据',
                  ]
                },
                {
                  title: '个人责任',
                  list: [
                    '1、受害人向被保险人提出索赔的相关材料',
                    '2、被保险人与受害人所签订的赔偿协议书或和解书',
                    '3、经判决或仲裁的，提供判决文书或仲裁裁决文书',
                    '4、造成人身伤害：',
                    '（1）受害人的病历、医疗费等医疗费用单据',
                    '（2）受害人死亡的，公安机关或医疗机构出具的死亡证明',
                    '5、造成财产损失：财产损失清单及费用清单',
                  ]
                },
                {
                  title: '签证拒签',
                  list: [
                    '1、被保险人支付签证费用的交付凭证',
                    '2、由签证签发机构出具的被保险人被拒签的证明材料，如拒签通知等',
                  ]
                },
              ]
            }
          ]
        },
      ],
      nav_actived: 0,
    })

    // 索赔材料
    const Material = () => (
      <div class={styles['material']}>
        <ProjectTitle title="索赔材料" />
        <div class={styles['tab-section']}>
          <div class={styles['tab-title']}>
            <div class={styles['tab-navs']}>
              {
                materialState.navs.map((item: any, index: number) => (
                  <div class={[styles['tab-nav'], index === materialState.nav_actived && styles.actived]} onClick={() => { materialState.nav_actived = index }}>{item.name}</div>
                ))
              }
            </div>
            <div class={styles['download-btn']} onClick={() => { window.location.href = materialState.navs[materialState.nav_actived].download_url }}>
              <DownloadOutlined class={styles.icon} />
              <span>下载索赔资料清单</span>
            </div>
          </div>
          <div class={styles['container']}>
            {
              materialState.nav_actived === 1 && (
                <div class={styles.tips}>
                  <ExclamationCircleOutlined class={styles.icon} />
                  <span>各产品索赔资料略有不同，具体以保险经纪服务委托协议为准</span>
                </div>
              )
            }
            {
              materialState.navs[materialState.nav_actived].content.map((item: any) => (
                <div class={styles.information}>
                  <div class={styles['item-title']}>{item.title}</div>
                  {
                    item.children?.map((itemY: any) => (
                      <div class={styles['list-one']}>
                        <div class={styles['list-one-flag']}>{itemY.title}</div>
                        <div class={styles['list-ul']}>
                          {
                            itemY.list.map((itemZ: any) => (
                              <div class={styles['list-li']}>{itemZ}</div>
                            ))
                          }
                        </div>
                      </div>
                    ))
                  }
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )

    return () => (
      <div class={styles.dutyClaimService}>
        <div class={styles.banner}>
          <img src={imgPath('/duty/claimService/banner.jpg')} />
        </div>
        <Achievement />
        <Flow />
        <ContactWay />
        <Mechanism />
        <TimeLimit />
        <Material />
      </div>
    )
  }
})